<template>
  <div style="display: inline">
    <el-button @click="useDelivery" type="danger" :disabled="this.orderArr.length === 0" class="mgr10 mgb10">传快递单</el-button>
    <el-dialog title="填写快递单号" :visible.sync="dialog">
      <template slot="title">
        <div class="header-title">
          <span style="font-size: 18px">填写快递单号</span>
          <span style="font-size: 14px">(当前选中订单数量：{{this.orderArr.length}})</span>
        </div>
      </template>

      <el-form :model="deliveryForm" label-width="150px" :rules="rules" ref="deliveryForm">
        <el-form-item label="选择快递"  prop="deliveryType">
          <el-select v-model="deliveryForm.deliveryType" filterable>
            <el-option-group
              v-for="group in expressGroupOptions"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.company_name"
                :value="item.type">
              </el-option>
            </el-option-group>
          </el-select>
<!--          <div class="tips" v-if="deliveryForm.deliveryType === 'FWSY' || deliveryForm.deliveryType === 'SFEXPRESS'">-->
<!--            【顺丰和丰网请输入单号 : 收件人或寄件人手机号后四位。例如：123456789:1234】-->
<!--          </div>-->
        </el-form-item>
        <el-form-item label="快递单号" prop="deliveryNo">
          <el-input v-model.trim.number="deliveryForm.deliveryNo" placeholder="请填写快递单号"></el-input>
        </el-form-item>
        <el-form-item
          label="手机尾号"
          prop="phone"
          v-if="deliveryForm.deliveryType === 'FWSY' || deliveryForm.deliveryType === 'SFEXPRESS'"
        >
          <el-input
            v-model.trim="deliveryForm.phone"
            placeholder="请填写收件人或寄件人手机号后四位"
            maxlength="4"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            maxlength="1000"
            show-word-limit
            placeholder="选填，如果当前订单有更多快递或其他来源，请在此处填写说明"
            v-model.trim="deliveryForm.remark">
          </el-input>
        </el-form-item>

        <el-form-item label="包装服务">
          <sticker-package v-model="deliveryForm.packageType"></sticker-package>
        </el-form-item>
        <el-form-item label="本次代贴单费用">
          <div style="color: #ED6A0C;font-size: 16px">{{calStickerPrice}} 元</div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {deepCopy} from "@/utils";
import {deliveryOrder, getExpressList} from "@/api/order";
import { EventBus } from "@/utils/eventBus";
import expressCompanyMixin from '@/views/order/mixin/expressCompany'
import StickerPackage from "@/views/order/components/stickerPackage.vue";


export default {
  name: "DeliveryButton",
  components: {StickerPackage},
  mixins: [expressCompanyMixin],
  props:{
    orderId:{
      type: String,
    },
    orderIds:{
      type: Array,
    },
    disable:{
      default: false,
    },
    orderArr:{
      type: Array,
      require: true,
    }
  },
  computed:{
    groupOptions(){
      const options = [
        {
          label: '常用',
          options: []
        },
        {
          label: '其他',
          options: [],
        }
      ];
      this.options.forEach(item=>{
        if(item.hot){
          options[0].options.push(item)
        }else{
          options[1].options.push(item)
        }
      })
      if(options[0].options.length === 0){
        options[1].label = ''
      }
      return options;
    },
    calStickerPrice(){
      let sumPrice = 0;
      if(this.stickerType === 1){
        let sumStickerPrice = this.$cal.accMul(this.orderArr.length,this.stickerPrice);
        sumPrice = this.$cal.accAdd(sumPrice,sumStickerPrice)
      }else{
        this.orderArr.forEach(item=>{
          switch (item.siteId){
            case 'MLM': // 墨西哥
              sumPrice = this.$cal.accAdd(sumPrice,this.MLMPrice)
              break;
            case 'MLB':
              sumPrice = this.$cal.accAdd(sumPrice,this.MLBPrice)
              break;
            case 'MLC':
              sumPrice = this.$cal.accAdd(sumPrice,this.MLCPrice)
              break;
            case 'MCO':
              sumPrice = this.$cal.accAdd(sumPrice,this.MCOPrice)
              break;
          }
        })
      }
      const orderNum = this.orderArr.length;
      let packagePrice = 0; //包装服务费
      switch (this.deliveryForm.packageType){
        case 'vacuum': // 真空
          packagePrice = this.$cal.accMul(orderNum,this.vacuum)
          break;
        case 'leatheroid': // 纸皮
          packagePrice = this.$cal.accMul(orderNum,this.leatheroid)
          break;
        case 'special': // 特殊
          packagePrice = this.$cal.accMul(orderNum,this.special)
          break;
      }

      sumPrice = this.$cal.accAdd(sumPrice,packagePrice)

      return sumPrice;
    }
  },
  created() {
    // console.log(this.expressGroupOptions);
    // this.getOptions()
    // this.deliveryForm.orderIds = this.orderIds;
    this.setStoreParams();
  },
  data(){
    return {
      dialog : false,
      loading: false,
      deliveryForm:{
        orderIds: [], // 订单号
        deliveryType: '', // 快递公司
        deliveryNo: '', // 快递单号
        phone: '',
        remark: '', // 备注
        packageType: '', // 包装类型
      },
      options:[], // 所有快递公司
      rules:{
        deliveryType:[
          { required: true, message: '请选择快递公司', trigger: 'change' }
        ],
        deliveryNo:[
          { required: true, message: '请填写快递单号', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字', trigger: 'blur' },
          { pattern: /^\d{4}/, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字'}
          // { min:1000,max:9999, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字', trigger: 'blur' },
        ],
      },
      stickerType: 1,
      stickerPrice: 0,
      vacuum: 0,
      leatheroid: 0,
      special: 0,
      MLMPrice: 0, // 墨西哥
      MLBPrice: 0, // 巴西
      MLCPrice: 0, // 智利
      MCOPrice: 0, // 哥伦比亚
    };
  },
  methods:{
    getOptions(){
      getExpressList()
        .then(res=>{
          this.options = res.data
        })
    },
    useDelivery(){
      this.dialog = true;
    },
    submitForm(){
      this.$refs.deliveryForm.validate(valid =>{
        if(valid){
          this.loading = true
          this.deliveryForm.orderIds = [];
          this.orderArr.forEach(item=>{
            this.deliveryForm.orderIds.push(item.orderId)
          })
          const postData = deepCopy(this.deliveryForm)
          deliveryOrder(postData)
            .then(res=>{
              this.loading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.dialog = false;
                // 通知父组件 订单状态发生了改变
                this.$emit('changeOrder',true)
              }else if(res.error === 300){
                EventBus.$emit('showRecharge',res.message);
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },
    // 设置贴单价格参数
    setStoreParams(){
      this.stickerType = this.$store.getters.stickerType;
      this.stickerPrice = this.$store.getters.stickerPrice;
      this.vacuum = this.$store.getters.vacuum;
      this.leatheroid = this.$store.getters.leatheroid;
      this.special = this.$store.getters.special;
      this.MLMPrice = this.$store.getters.MLMPrice;
      this.MLBPrice = this.$store.getters.MLBPrice;
      this.MLCPrice = this.$store.getters.MLCPrice;
      this.MCOPrice = this.$store.getters.MCOPrice;
    },
  }
}
</script>

<style scoped lang="scss">
.tips{
  color: #FC6347;
}
</style>
